```svelte
<script lang="ts">
  import * as carousel from "@zag-js/carousel"
  import { normalizeProps, useMachine } from "@zag-js/svelte"

  const items = [
  "https://tinyurl.com/5b6ka8jd",
  "https://tinyurl.com/7rmccdn5",
  "https://tinyurl.com/59jxz9uu",
 ]

  const id = $props.id()
  const service = useMachine(
    carousel.machine, ({ id: id, slideCount: items.length }),
  )
  const api = $derived(carousel.connect(service, normalizeProps))
</script>

<div {...api.getRootProps()}>
  <div {...api.getControlProps()}>
    <button {...api.getPrevTriggerProps()}>Prev</button>
    <button {...api.getNextTriggerProps()}>Next</button>
  </div>
  <div {...api.getItemGroupProps()}>
    {#each items as image, index}
      <div {...api.getItemProps({ index })}>
        <img src={image} alt="" />
      </div>
    {/each}
  </div>
  <div {...api.getIndicatorGroupProps()}>
    {#each api.pageSnapPoints as _, index}
      <!-- svelte-ignore a11y_consider_explicit_label -->
      <button {...api.getIndicatorProps({ index })}></button>
    {/each}
  </div>
</div>
```
